<template>
  <div class="newsInfo-container">
    <h3 class="title">时人说事</h3>
    <p class="subtitle">
      <span>发表时间：{{ time | dateFormat }}</span>
      <span>点击次数：{{ likes }}次</span>
    </p>
    <hr>
    <div class="content">
      <p>
        <img :src="avatar" alt="">
      </p>
      {{ content }}
    </div>
    <!-- 评论区域 -->
    <comment-box></comment-box>
  </div>
</template>

<script>
import comment from '../subcomponent/comments.vue'
export default {
  data() {
    return {
      day: new Date().toLocaleString(),
      click: Math.floor(Math.random() * 30) + 1,
      id: this.$route.params.id,
      content: '',
      author: '',
      time: '',
      likes: '',
      avatar: ''
    }
  },
  created() {
    this.getNewsList()
  },
  methods: {
    getNewsList() {
      this.$http.get('../../data_file/info.json').then(result => {
        // console.log(result.body)
        this.content = result.body.comments[this.id].content
        this.author = result.body.comments[this.id].author
        this.time = (result.body.comments[this.id].time).toLocaleString()
        this.likes = result.body.comments[this.id].likes
        this.avatar = result.body.comments[this.id].avatar
      })
    }
  },
  components: {
    'comment-box': comment
  }

}
</script>

<style lang="scss" scoped>
.newsInfo-container {
  padding: 0 4px;
  .title {
    font-size: 16px;
    text-align: center;
    margin: 15px 0;
    color: red;
  }
  .subtitle {
    color: #226aff;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
  }
  .content {
    padding-bottom: 20px;
  }
}
</style>
